<template>
	<view class="content">
		<view class="top">
			<view class="top_content">
				<view class="top_text">
					<view class="top_text_name" v-for="(item,index) in taskList " :key="item.taskCode">
						<view class="text1">{{item.taskStatusTypeEntity.statusName}}</view>
						<view class="text2">工单号: {{item.taskCode}}</view>
					</view>
					<u-icon name="car" color="#e46220" size="100"></u-icon>
				</view>
			</view>
		</view>
		<view class="task-detail">
			<view v-for="(item,index) in taskList " :key="item.innerCode">
				<view class="info-section">
					<text class="label">设备号：</text>
					<text class="value">{{ item.innerCode }}</text>
				</view>
				<view class="info-section">
					<text class="label">创建时间：</text>
					<text class="value">{{ formatDateTime(item.createTime) }}</text>
				</view>
				<view class="info-section">
					<text class="label">地址：</text>
					<text class="value">{{ item.addr }}</text>
				</view>
				<view class="info-section">
					<text class="label">工单类型：</text>
					<text class="value">{{ item.taskType.typeName }}</text>
				</view>
			</view>
			<view class="replenishment-details">
				<text class="label">补货详情：</text>
				<view v-for="(item, index) in ListDetail" :key="item.channelCode">
					<text class="value"> 货道{{ item.channelCode }} {{ item.skuName }} {{ item.expectCapacity }}个</text>
				</view>
			</view>

			<view class="info-section" v-for="(item,index) in taskList " :key="item.desc">
				<text class="label">备注：</text>
				<text class="value">{{ item.desc }}</text>
			</view>
			<view v-for="(item,index) in taskList" :key="index">
				<view class="buttons" v-if="item.taskStatusTypeEntity.statusId === 1">
					<button @click="rejectOrder" class="reject-button">拒绝</button>
					<button @click="acceptOrder" class="accept-button">接受</button>
				</view>
				<view class="buttons" v-if="item.taskStatusTypeEntity.statusId === 2">
					<button @click="refuseOrder" class="reject-button">取消工单</button>
					<button @click="completeOrder" class="accept-button">完成工单</button>
				</view>
			</view>
			<!-- 拒绝 -->
			<u-modal :show="show" :title="title" :show-cancel-button="showCancel" @cancel="handleCancel"
				@confirm="handleConfirm">
				<view slot="default">
					<textarea v-if="showInput" v-model="inputValue" rows="4" style="font-size: 20px;"
						placeholder="请输入内容" />
				</view>
			</u-modal>

			<!-- 取消 -->
			<u-modal :show="show_2" :title="title_2" :show-cancel-button="showCancel" @cancel="handleCancel_2"
				@confirm="handleConfirm_2">
				<view slot="default">
					<textarea v-if="showInput" v-model="inputValue" rows="4" style="font-size: 20px;"
						placeholder="请输入内容" />
				</view>
			</u-modal>

		</view>

	</view>
</template>

<script>
	import {
		findById,
		search,
		cancel,
		accept,
		complete
	} from '@/api/task/task.js'
	export default {
		data() {
			return {
				taskId: null,
				userId: this.$store.state.user.userId,
				ListDetail: [],
				taskList: [],
				show: false, // 控制模态框显示与否
				show_2: false,
				title: '拒绝理由',
				title_2: '取消理由',
				showCancel: true, // 是否显示取消按钮
				showInput: true, // 是否显示输入框
				inputValue: '' // 输入框的值
			}
		},
		onLoad(options) {
			this.taskId = options.taskId;
			this.taskCode = options.taskCode
			this.getTaskDetail();
			this.getTask();
		},
		onPullDownRefresh() {
			console.log('开始下拉刷新...');
			this.getTask();
			this.getTaskDetail();
			setTimeout(function() {
				uni.stopPullDownRefresh();
				console.log('停止下拉刷新...');
			}, 1500);
		},
		methods: {
			formatDateTime(isoString) {
				if (!isoString) return '';
			
				const date = new Date(isoString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
			
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			// 查询补货详情
			getTaskDetail() {
				findById(this.taskId).then(res => {
					this.ListDetail = res
				})
			},
			// 查询工单详情
			getTask() {
				search(this.userId, null, this.taskCode).then(res => {
					this.taskList = res.currentPageRecords
				})
			},
			rejectOrder() {
				console.log('拒绝订单');
				// 这里可以添加实际的逻辑处理
				this.show = true
			},
			refuseOrder() {
				console.log('取消订单');
				// 这里可以添加实际的逻辑处理
				this.show_2 = true
			},

			acceptOrder() {
				console.log('接受订单');
				accept(this.taskId).then(res => {

					this.$tab.switchTab('/pages/task/task');

					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})

				})
			},

			completeOrder() {
				console.log('完成工单');
				complete(this.taskId).then(res => {

					this.$tab.switchTab('/pages/task/taskTodo');

					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})

				})
			},

			//  拒绝工单
			handleCancel() {
				console.log('Cancel button clicked');
				this.show = false; // 关闭模态框
				this.inputValue = ''; // 清空输入框
			},
			handleConfirm() {
				console.log('Submitting input:', this.inputValue);
				// 在这里添加确认逻辑
				cancel(this.taskId, this.inputValue).then(res => {

					this.inputValue = ''; // 清空输入框
					this.show = false; // 关闭模态框

					this.$tab.switchTab('/pages/task/task');
					uni.showToast({
						icon: 'success',
						title: '拒绝成功'
					})
				})
			},

			// 取消工单
			handleCancel_2() {
				console.log('Cancel button clicked');
				this.show_2 = false; // 关闭模态框
				this.inputValue = ''; // 清空输入框
			},
			handleConfirm_2() {
				console.log('Submitting input:', this.inputValue);
				// 在这里添加确认逻辑
				cancel(this.taskId, this.inputValue).then(res => {

					this.inputValue = ''; // 清空输入框
					this.show_2 = false; // 关闭模态框
					
					this.$tab.switchTab('/pages/task/taskTodo');
					uni.showToast({
						icon: 'success',
						title: '取消成功'
					})

				})
			},
		}
	};
</script>

<style scoped>
	/* 确保 html 和 body 没有默认的 margin 和 padding */
	html,
	body {
		margin: 0;
		padding: 0;
	}

	.content .top {
		padding-bottom: 30px;
		background-color: #282828;
	}

	.top_content {
		display: flex;
		padding-top: 53px;
		padding-left: 35px;
	}

	.top_text {
		color: #fff;
		/* 白色文字，根据背景选择对比度高的颜色 */
		width: 100%;
		font-family: 'Courier New', Courier, monospace;
		display: flex;
		justify-content: space-between;
		margin-right: 40px;
	}

	.top_text_name {
		margin-bottom: 10px;
		margin: auto 0;

	}

	.top_text_name .text1 {
		font-size: 20px;
	}

	.top_text_name .text2 {
		margin-top: 8px;
		font-size: 16px;
	}

	.task-detail {
		padding: 20px;
		font-size: 16px;
	}

	.info-section {
		margin: 10px;
		display: flex;
		align-items: center;
	}

	.label {
		font-weight: bold;
		margin-right: 10px;
	}

	.value {
		flex: 1;
		margin-left: 40px;
	}

	.replenishment-details {
		margin: 10px;
		margin-top: 20px;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.reject-button,
	.accept-button {
		width: 45%;
		height: 50px;
		border-radius: 10px;
		text-align: center;
		line-height: 50px;
	}

	.reject-button {
		border: #000 1px solid;
		background-color: white;
		color: #000;
	}

	.accept-button {
		background-color: #403f41;
		color: #baa488;
	}
</style>